<!DOCTYPE html>
<html>
<head>
    <title>JW6 Skin Tests</title>
    <script type="text/javascript" src="assets/jwplayer.js"></script>
    <script type="text/javascript">
        var primaryCookie = 'html5';
        var skinURL = "../skins/six/six.xml";
        
        var cookies = document.cookie.split(";");
        for (i=0; i < cookies.length; i++) {
            var x = cookies[i].substr(0, cookies[i].indexOf("="));
            var y = cookies[i].substr(cookies[i].indexOf("=") + 1);
            x = x.replace(/^\s+|\s+$/g,"");
            if (x == 'primaryCookie') {
                primaryCookie = y;
            } else if (x == 'skinURL') { 
                skinURL = y;
            }
        }
    </script>
    <style type="text/css">
        body { padding: 50px 100px; width: 720px; font: 13px/20px Arial; background: #FFF; }
        a, h1, h2 { color: #369; }
        h1 { font-size: 32px; }
        h2 { margin-top: 40px; }
        input { width: 240px; }
    </style>
</head>
<body>

<h1>JW6 Skin Tests</h1>

<p>This page tests the JW6 skin linked to below various configurations:</p>

<form onsubmit="return reload();">
    <input type="text" value ="" id="skin" />
    <button type="submit">submit</button
</form>
<script type="text/javascript">
    document.getElementById('skin').value = skinURL;
    function reload() {
        skinURL = document.getElementById('skin').value;
        document.cookie = "skinURL=" + skinURL;
        window.location.reload();
        return false;
    };
</script>


<p>Note that, in order for this page to work, you have to load it from a webserver (or localhost)!</p>



<h2>Extensive setup</h2>

<p>This setup includes all player features, like hd/cc tooltips, dock buttons and a playlist.</p>

<div id="extensive"></div>

<script type="text/javascript">
    jwplayer("extensive").setup({
        playlist: [{
            description: 'Big Buck Bunny is a short animated film by the Blender Institute.',
            sources: [{
                file: 'http://content.bitsontherun.com/videos/bkaovAYt-injeKYZS.mp4',
                width: 320
            },{
                file: 'http://content.bitsontherun.com/videos/bkaovAYt-kNspJqnJ.mp4',
                width: 640
            }],
            image: 'http://content.bitsontherun.com/thumbs/bkaovAYt-480.jpg',
            title: 'Big Buck Bunny'
        },{
            description: 'Sintel is a fantasy computer generated short movie.',
            sources: [{
                file: 'http://content.bitsontherun.com/videos/3XnJSIm4-injeKYZS.mp4',
                width: 320
            },{
                file: 'http://content.bitsontherun.com/videos/3XnJSIm4-kNspJqnJ.mp4',
                width: 640
            }],
            image: 'http://content.bitsontherun.com/thumbs/3XnJSIm4-480.jpg',
            title: 'Sintel'
        },{
            description: 'Elephants Dream is the first movie made entirely with open source graphics software.',
            sources: [{
                file: 'http://content.bitsontherun.com/videos/kaUXWqTZ-injeKYZS.mp4',
                width: 320
            },{
                file: 'http://content.bitsontherun.com/videos/kaUXWqTZ-kNspJqnJ.mp4',
                width: 640
            },],
            image: 'http://content.bitsontherun.com/thumbs/kaUXWqTZ-480.jpg',
            title: 'Elephants Dream'
        },{
            description: 'Big Buck Bunny is a short animated film by the Blender Institute.',
            sources: [{
                file: 'http://content.bitsontherun.com/videos/bkaovAYt-injeKYZS.mp4',
                width: 320
            },{
                file: 'http://content.bitsontherun.com/videos/bkaovAYt-kNspJqnJ.mp4',
                width: 640
            }],
            image: 'http://content.bitsontherun.com/thumbs/bkaovAYt-480.jpg',
            title: 'Big Buck Bunny'
        },{
            description: 'Sintel is a fantasy computer generated short movie.',
            sources: [{
                file: 'http://content.bitsontherun.com/videos/3XnJSIm4-injeKYZS.mp4',
                width: 320
            },{
                file: 'http://content.bitsontherun.com/videos/3XnJSIm4-kNspJqnJ.mp4',
                width: 640
            }],
            image: 'http://content.bitsontherun.com/thumbs/3XnJSIm4-480.jpg',
            title: 'Sintel'
        },{
            description: 'Elephants Dream is the first movie made entirely with open source graphics software.',
            sources: [{
                file: 'http://content.bitsontherun.com/videos/kaUXWqTZ-injeKYZS.mp4',
                width: 320
            },{
                file: 'http://content.bitsontherun.com/videos/kaUXWqTZ-kNspJqnJ.mp4',
                width: 640
            },],
            image: 'http://content.bitsontherun.com/thumbs/kaUXWqTZ-480.jpg',
            title: 'Elephants Dream'
        }],
        listbar: {
            position: 'right',
            size: 260
        },
        primary: primaryCookie,
        skin: skinURL,
        width: 740
    });
    jwplayer("extensive").onReady(function() {
        if(jwplayer().getRenderingMode() == "flash") { 
            this.addButton("assets/html5.png", "Switch to HTML5", switchMode, "button1");
        } else { 
            this.addButton("assets/flash.png", "Switch to Flash", switchMode, "button1");
        }
        this.addButton("assets/error.png", "Generate an Error", setError, "button2");
    });
    function switchMode() {
        primaryCookie == 'html5' ? primaryCookie = 'flash': primaryCookie = 'html5';
        document.cookie = "primaryCookie=" + primaryCookie;
        window.location.reload();
    };
    function setError() {
        jwplayer("extensive").load({file:'assets/404.mp4'}).play();
    };
</script>



<h2>Minimum size</h2>

<p>At this minimum size, all controls should still be visible and usable.</p>

<div id="minimum"></div>

<script type="text/javascript">
    jwplayer("minimum").setup({
        file: 'http://content.bitsontherun.com/videos/3XnJSIm4-I3ZmuSFT.m4a',
        image: 'http://content.bitsontherun.com/thumbs/3XnJSIm4-480.jpg',
        primary: primaryCookie,
        skin: skinURL,
        width: 320,
        height: 180
    });
</script>



<h2>Audio mode</h2>

<p>In this mode, the controlbar should blend in with the page background.</p>

<div id="audio"></div>

<script type="text/javascript">
    jwplayer("audio").setup({
        file: 'http://content.bitsontherun.com/videos/3XnJSIm4-I3ZmuSFT.m4a',
        height: 40,
        primary: primaryCookie,
        skin: skinURL
    });
</script>



</body>
</html>